<template>
  <div class="container">
    <div style="height: 10px"></div>
    <div class="head" v-if="indent != '知识库'">
      <div style="
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 90%;
          margin-left: 5%;
        ">
        <div style="width: 40%; text-align: center">
          <picker mode="date" :value="date" :start="startDate" :end="endDate" fields="day" @change="bindDateChange">
            <input v-model="date" disabled type="text" />
          </picker>
        </div>
        <div style="width: 20%; text-align: center">至</div>
        <div style="width: 40%; text-align: center">
          <picker mode="date" :value="dates" :start="startDates" :end="endDates" fields="day" @change="bindDateChanges">
            <input disabled v-model="dates" type="text" />
          </picker>
        </div>
      </div>
    </div>
    <div style="height: 40px" v-if="indent != '知识库'"></div>
    <!-- 内容切换 -->
    <div v-if="list.length == 0">
      <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
      </u-empty>
    </div>
    <div class="card" v-if="indent != '知识库'" v-for="item in list" @click="taskDetail(item)">
      <div style="height: 10px"></div>
      <div class="card-top">
        <div style=" text-align: center;font-size: 18px;font-weight: 500;">{{ item.repairMaintainNo ?? item.inspectNo }}</div>
        <!-- <div v-show="indent == '维保'" :class="item.repairMaintainOrderState == 0 ? 'right' : 'right1'"
          style="width: 20%; text-align: center;border-radius: 4px;">
          {{ item.repairMaintainOrderState == 0 ? "自派单" : "手工单" }}
          
        </div> -->
        <div v-show="indent == '维保'" style="width: 20%; text-align: center;border-radius: 4px;">
          <image style="width: 110rpx;height: 60rpx;"
            :src="item.repairMaintainOrderState === 0 ? 'https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202370.png' : 'https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202371.png'" />
        </div>
      </div>
      <div style="height: 10px"></div>
      <u-line color="#83AF92"></u-line>
      <div style="height: 10px"></div>
      <div class="items" v-show="indent != '知识库'">
        <div>发单日期</div>
        <div>{{ item.launchTime ?? item.createTime }}</div>
      </div>
      <div style="height: 10px"></div>
      <div class="items" v-show="indent != '知识库'">
        <div>接单人员</div>
        <div>{{ item.userName ?? item.orderPersonName }}</div>
      </div>
      <div style="height: 10px"></div>
      <div class="items" v-show="indent != '知识库'">
        <div>手机号码</div>
        <div>{{ item.phonenumber ?? item.phoneNumber }}</div>
      </div>
      <div style="height: 10px"></div>
      <div class="items" v-show="indent == '维保'">
        <div>设备编号</div>
        <div>{{ item.repairMaintainNo }}</div>
      </div>
      <div class="items" v-show="indent == '巡检'">
        <div>巡检对象</div>
        <div>{{ item.inspectName }}</div>
      </div>
      <!-- <div v-show="indent == '维保'" :class="item.repairMaintainState == 0 ? 'status' : 'status1'">
        {{ item.repairMaintainState == 0 ? "待接单" :
          item.repairMaintainState == 1 ? '进行中' : item.repairMaintainState == 2 ? '已完成' : '无' }}
      </div>
      <div v-show="indent == '巡检'" :class="item.workOrderState == 2 ? 'status' : 'status1'">
        {{ item.workOrderState == 1 ? "待接单" : item.workOrderState == 2 ? '进行中' : item.workOrderState == 3 ? '已完成' : ''
        }}
      </div> -->
      <div style="height: 15px"></div>
    </div>
    <div class="card" v-if="indent == '知识库'" v-for="item in list">
      <div style="height: 10px"></div>
      <div class="card-top">
        <div style=" text-align: center;font-size: 18px;font-weight: 500;">{{ item.safetyTrainNo }}</div>
      </div>
      <div style="height: 10px"></div>
      <u-line color="#83AF92"></u-line>
      <div style="height: 10px"></div>
      <div class="items">
        <div>试卷名称</div>
        <div>{{ item.paperName }}</div>
      </div>
      <div style="height: 10px"></div>
      <div class="items">
        <div>合格分数</div>
        <div>{{ item.scoreLine }}</div>
      </div>
      <div style="height: 10px"></div>
      <div class="items">
        <div>开始时间</div>
        <div>{{ item.startTime }}</div>
      </div>
      <div style="height: 10px"></div>
      <div class="items">
        <div>结束时间</div>
        <div>{{ item.endTime }}</div>
      </div>
      <div style="height: 10px"></div>
      <div class="items">
        <div>我的成绩</div>
        <div>{{ item.score }}</div>
      </div>
      <div style="height: 15px"></div>
    </div>
    <div style="height: 3vh;"></div>
  </div>
</template>
<script>
import { mainList, insList, myRecord } from '../api/api.js';
export default {
  data() {
    const currentDate = this.getDate({
      format: true,
    });
    return {
      date: currentDate,
      dates: currentDate,
      indent: '',
      startTime: '',
      endTime: '',
      list: [],
    };
  },
  methods: {
    bindDateChange: function (e) {
      //选择日期
      this.date = e.detail.value;
      console.log("date", this.date);

      if (this.indent == '维保') {
        this.wList();
      } else if (this.indent == '巡检') {
        this.xList();
      }
    },
    bindDateChanges: function (e) {
      //选择日期
      this.dates = e.detail.value;
      console.log("date", this.date);
      if (this.indent == '维保') {
        this.wList();
      } else if (this.indent == '巡检') {
        this.xList();
      }
    },
    getDate(type) {
      //年月日
      const date = new Date();
      // const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === "start") {
        year = year - 60;
      } else if (type === "end") {
        year = year + 2;
      }
      month = month > 9 ? month : "0" + month;
      day = day > 9 ? day : "0" + day;
      return `${year}-${month}-${day}`;
    },
    taskDetail(item) {
      // uni.setStorageSync('mainDetail', item);
      // console.log(item, 'item');
      // uni.navigateTo({ url: '/pagesPlant/index/maindetail' })
    },
    addQuest() {
      // uni.navigateTo({ url: '/pagesPlant/index/addmain' })
    },
    wList() {
      mainList({
        repairMaintainState: '',
        beginTime: this.date,
        endTime: this.dates,
        type: 2
      }).then(res => {
        if (res.data.code == 200) {
          console.log(res.data.rows, 'res');
          // 使用 map 方法进行数据转换
          this.list = res.data.rows.map(item => ({
            id: item.repairMaintainTask.id,
            phonenumber: item.phonenumber,
            userName: item.repairMaintainTask.userName,
            launchTime: item.repairMaintainTask.launchTime,
            repairMaintainNo: item.repairMaintainTask.repairMaintainNo,
            repairMaintainOrderState: item.repairMaintainTask.repairMaintainOrderState,
            repairMaintainState: item.repairMaintainTask.repairMaintainState,
            repairMaintainType: item.repairMaintainTask.repairMaintainType,
            deptName: item.repairMaintainTask.deptName,
            deptId: item.repairMaintainTask.deptId,
            deviceNo: item.repairMaintainTask.deviceNo,
            taskDesc: item.repairMaintainTask.taskDesc,
            deviceSate: item.repairMaintainTask.deviceSate,
            // faultType:item.repairMaintainTask.faultType,
            faultType: item.repairMaintainTask.faultType,
            emerDegree: item.repairMaintainTask.emerDegree,
            deviceName: item.repairMaintainTask.deviceName,
            scenePhoto: item.repairMaintainTask.scenePhoto
          }));
        }
      })
    },
    xList() {
      insList({
        workOrderState: '',
        beginTime: this.date,
        endTime: this.dates,
        type: 2
      }).then(res => {
        console.log(res.data, '巡检工单');
        this.list = res.data.data;
      })
    },
    zList() {
      myRecord({}).then(res => {
        console.log(res.data, 'res.data');
        if (res.data.code == 200) {
          this.list = res.data.data;
        }
      })
    }
  },

  onReady() {
    if (this.indent == '巡检') {
      uni.setNavigationBarTitle({
        title: '我的巡检记录'
      });
      // this.xList();
    } else if (this.indent == '维保') {
      uni.setNavigationBarTitle({
        title: '我的维保记录'
      });
      // this.wList();
    } else if (this.indent == '知识库') {
      uni.setNavigationBarTitle({
        title: '我的考试记录'
      });
      // this.zList();
    }
  },
  onShow() {
    this.indent = uni.getStorageSync('flag_key');
    if (this.indent == '巡检') {
      this.xList();
    } else if (this.indent == '维保') {
      this.wList();
    } else if (this.indent == '知识库') {
      this.zList();
    }
  }
};
</script>
<style lang="scss">
.container {
  height: 100vh;
  width: 100vw;
  background: #f3f3f3;
  color: #000000;
  overflow-y: scroll;
}

.card {
  width: 95%;
  margin-left: 2.5%;
  margin-top: 10px;
  border-radius: 10px;
  background: #ffffff;

  .card-top {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    margin-left: 5%;
  }
}

.items {
  display: flex;
  align-items: center;
  width: 90%;
  margin-left: 5%;
  justify-content: space-between;
  font-size: 14px;
}

.flexNew {}

.table {
  width: 90%;
  margin-left: 5%;
}

.status {
  color: #fff;
  background: #1b9c46;
  width: 90%;
  margin-left: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-radius: 3px;
}

.status1 {
  color: #1a512c;
  background: #91c5a3;
  width: 90%;
  margin-left: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-radius: 3px;
}

.right {
  background: #FDBD18;
  color: #fff;

}

.right1 {
  background: #50AB18;
  color: #fff;
}

.head {
  display: flex;
  align-items: center;
  height: 50px;
  background: #ffffff;
  color: #000000;
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 9999;
}

.btn {
  display: flex;
  align-items: center;
  background: #1B9C46;
  color: #fff;
  border-radius: 7px;
  height: 60rpx;
  justify-content: center;
  position: absolute;
  width: 100px;
  z-index: 9999;
  bottom: 10%;
  right: 10px;
}

.btnRound {
  width: 90%;
  margin-left: 5%;
  display: flex;
  justify-content: space-between;
}
</style>